<template>
<div>
    <AttendanceHeader :profile-name="msg" :profile-image-url="url" :dayInfo="timeinfo"></AttendanceHeader>
    <div class="rest-record-items">
      <ul class="clear">
        <li>
          <em>5</em>
          <span>加班次数</span>
        </li>
        <li>
          <em>11</em>
          <span>本月加班时长(小时)</span>
        </li>
      </ul>
    </div>
    <div class="rest-record-content">
        <div class="rest-items">
            <div class="timeStamp">
                <span class="day">28
                    <em>9</em>
                </span>
                <span class="week">星期一</span>
            </div>
            <div class="clear">
                <div class="usetime fl">0.5小时</div>
                <ul class="fl">
                    <li class="clear">
                        <p class="during">09-22&nbsp;16:30～09-22&nbsp;17:30</p>
                        <!-- <em class="abnormal">迟到</em> -->
                        <strong>作废</strong>
                        <span>查看加班申请单&nbsp;></span>
                    </li>
                    <li class="clear">
                        <p class="during">09-22&nbsp;16:30～09-22&nbsp;17:30</p>
                        <span>查看加班申请单&nbsp;></span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="rest-items">
            <div class="timeStamp">
                <span class="day">28
                    <em>9</em>
                </span>
                <span class="week">星期一</span>
            </div>
            <div class="clear">
                <div class="usetime fl">1小时</div>
                <ul class="fl">
                    <li class="clear">
                        <p class="during">09-22&nbsp;16:30～09-22&nbsp;17:30</p>
                        <span>查看加班申请单&nbsp;></span>
                    </li>
                    <li class="clear">
                        <p class="during">09-22&nbsp;16:30～09-22&nbsp;17:30</p>
                        <span>查看加班申请单&nbsp;></span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="rest-items">
            <div class="timeStamp">
                <span class="day">28
                    <em>9</em>
                </span>

                <span class="week">星期一</span>
            </div>
            <div class="clear">
                <div class="usetime fl">1小时</div>
                <ul class="fl">
                    <li class="clear">
                        <!-- 跨自然日换休 -->
                        <p class="during">09-22&nbsp;16:30～09-23&nbsp;17:30</p>
                        <span>查看加班申请单&nbsp;></span>
                    </li>
                    <li class="clear">
                        <p class="during">09-22&nbsp;16:30～09-22&nbsp;17:30</p>
                        <span>查看加班申请单&nbsp;></span>
                    </li>
                </ul>
            </div>
        </div>
        <p v-for="x in 50 " :key="x">{{x}}</p>
    </div>
    </div>
</template>
<script>
import AttendanceHeader from "../component/header.vue";
export default {
  name: "ot--profile-details",
  components: {
    AttendanceHeader
  },
  data() {
    return {
      msg: "hzz",
      url: "http://owtz12sxf.bkt.clouddn.com/01.jpg",
      timeinfo: "2017-13",
      allAttendance: 17,
      lateCount: 1,
      missCard: 2,
      outerAttendance: 3,
      AttendancePercentage: 80
    };
  }
};
</script>

